<template>
	<div class="main">
		<div class="card_container">
			<van-checkbox-group v-model="result" ref="checkboxGroup">
				<template v-if="carList.length > 0">
					<van-swipe-cell :right-width="50" v-for="(item, index) in carList" :key="index">
						<div class="good-item">
							<van-checkbox :name="item.id" />
							<van-image width="0.9rem" height="0.9rem" fit="contain" :src="item.ppicture" />
							<div class="good-desc">
								<div class="good-title">
									<span>{{ item.pname }}</span>
									<span>x1</span>
								</div>
								<div class="good-btn">
									<div class="price">¥{{ item.pprice }}</div>
								</div>
							</div>
						</div>
						<template #right>
							<van-button square icon="delete" type="danger" class="delete-button" @click="deleteGood(item.id)" />
						</template>
					</van-swipe-cell>
				</template>
			</van-checkbox-group>
		</div>
		<van-submit-bar class="but_bar" :price="total" button-text="提交订单" @submit="onSubmit" v-if="carList.length > 0">
			<van-checkbox v-model="isCheckAll" @click="checkAll">全选</van-checkbox>
		</van-submit-bar>

		<div class="empty" v-if="!carList.length && !isLoading">
			<img class="empty-cart" src="https://s.yezgea02.com/1604028375097/empty-car.png" alt="空购物车" />
			<div class="title">购物车空空如也</div>
			<van-button round color="#1baeae" type="primary" @click="goTo('/category/0')" block>前往选购</van-button>
		</div>
		<div class="empty" v-show="isLoading">
			<van-loading type="spinner" />
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import { ShopCarList, ShopCarDelete } from '@s/shopcar';
const { proxy } = getCurrentInstance();
const data = reactive({
	checked: false,
	isCheckAll: false,
	result: [],
	carList: [],
	isLoading: true,
});
const { checked, result, isCheckAll, carList, isLoading } = toRefs(data);
const emit = defineEmits(['isNav', 'loading']);
onMounted(() => {
	// 初始化活动状态
	emit('isNav');
	emit('loading');
	proxy.$refs.checkboxGroup.toggleAll(true);
});
ShopCarList({ pageSize: 100, pageNum: 1, uid: proxy.$store.state.user.userInfo.id }).then((res) => {
	data.isLoading = false;
	data.carList = res.data.data;
	proxy.$store.commit('shopcar/listLength', res.data.data.length);
});
const goTo = (address) => {
	proxy.$router.push({
		path: address,
		// query: param,
	});
};
const checkAll = () => {
	if (data.isCheckAll == true) {
		proxy.$refs.checkboxGroup.toggleAll(true);
	} else {
		proxy.$refs.checkboxGroup.toggleAll(false);
	}
};
const total = computed(() => {
	let sum = 0;
	let _list = data.carList.filter((item) => data.result.includes(item.id));
	_list.forEach((item) => {
		sum += item.pprice;
	});
	return sum * 100;
});
const onSubmit = () => {
	if (!data.result.length) {
		proxy.$toast('请选择勾选购物车内物品')
		return;
	}
	proxy.$store.commit('shopcar/buyIds', data.result);
	proxy.$router.push({
		path: '/createorder',
	});
};
const deleteGood = (id) => {
	ShopCarDelete({ id: id }).then((res) => {
		ShopCarList({ pageSize: 100, pageNum: 1, uid: proxy.$store.state.user.userInfo.id }).then((res) => {
			data.carList = res.data.data;
			proxy.$store.commit('shopcar/listLength', res.data.data.length);
			proxy.$toast.success('删除成功');
		});
	});
};
</script>

<style lang="scss" scoped>
.main {
	min-height: 93vh;
	background-color: whitesmoke;
	padding-top: 43px;
	.card_container {
		overflow: hidden;
		.good-item {
			display: flex;
			background-color: white;
			padding-left: 10px;
			.good-desc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				padding: 20px;
				.good-title {
					display: flex;
					justify-content: space-between;
				}
				.good-btn {
					display: flex;
					justify-content: space-between;
					.price {
						font-size: 16px;
						color: red;
						line-height: 28px;
					}
					.van-icon-delete {
						font-size: 20px;
						margin-top: 4px;
					}
				}
			}
		}
		.delete-button {
			margin-left: 1px;
			width: 50px;
			height: 100%;
		}
	}
	.but_bar {
		position: fixed;
		bottom: 48px;
	}
	.empty {
		width: 50%;
		margin: 0 auto;
		text-align: center;
		margin-top: 22vh;
		.empty-cart {
			width: 150px;
			margin-bottom: 20px;
		}
		.van-icon-smile-o {
			font-size: 50px;
		}
		.title {
			font-size: 16px;
			margin-bottom: 20px;
		}
	}
}
</style>
